<template>
    <div class="box">
        <topLog></topLog>
        <div class="content">
            <el-container>
                <el-row type="flex" style="width: 100%; justify-content: center;">
                    <el-col :span="4">
                        <el-aside style="width: auto;">
                            <div class="content-left">
                                <el-avatar shape="circle" :size="50" fit="fit">{{secondBranch.navigation}}</el-avatar>
                                <h3>{{secondBranch.navigation}}</h3>
                                <h6>所属：{{firstBranch}}</h6>
                                <div class="record">
                                    <el-tag type="danger" size="medium">{{secondBranch.star}}赞</el-tag>
                                    <el-tag type="warning" size="medium">{{secondBranch.contentCount}}评论</el-tag>
                                </div>
                            </div>
                        </el-aside>
                    </el-col>
                    <el-col :span="16">
                        <el-container>
                            <el-header>
                                <div class="content-right">
                                    <div class="title">部门简介</div>
                                    <span>
                                        {{secondBranch.include}}
                                    </span>
                                </div>
                            </el-header>
                            <el-main>
                                <div class="content-right--contents">
                                    <el-row :gutter="10" type="flex" class="row-bg" style="flex-wrap: wrap;">
                                        <el-col :span="8" v-for="(item, index) in branchWorks" :key="index">
                                            <el-card :body-style="{ padding: '0px', flex: '1', height: '95%' }" style="height: 95%; margin-top: 0;">
                                                <div @click="goDetail(item.navId, item.depFirstId, item.desId, item.id)" class="smallWork">
                                                    <img :src="item.cover" style="width: 100%; flex: 1; height: 95%">
                                                    <div>
                                                        <span>{{item.title}}</span>
                                                    </div>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-main>
                        </el-container>
                    </el-col>
                </el-row>
            </el-container>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import topLog from '../../components/top-logo.vue'
import Footer from '../../components/footer.vue'
export default {
    components: {
        topLog,
        Footer
    },
    data() {
        return {
            firstBranch: '',
            secondBranch: {},
            queryInfo: {
                page: 1,  // 页数
                size: 1000, // 条数
            },
            branchWorks: [],
            allStar: 0,
            allComment: 0
        }
    },
    mounted() {
        this.getSecondNavigation()
        this.getBranchWork()
    },
    methods: {
        getSecondNavigation() {
            this.$http.get(this.$api.secondNavigation)
            .then(res => {
                if(res.data.status === 20000) {
                    res.data.data.navigation.map((value, index) => {
                        if(value.navId === this.$route.query.firstId) {
                            this.firstBranch = value.navigation
                            this.$store.commit('getFirst', value.navigation)  // 存入vuex
                            value.deps.map((currentValue, currentIndex) => {
                                if(currentValue.navId === this.$route.query.secondId) {
                                    this.secondBranch = currentValue
                                    this.$store.commit('getSecond', currentValue.navigation)  // 存入vuex
                                }
                            })
                        }
                    })
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        getBranchWork() {
            this.$http.get(this.$api.branchList + this.$route.query.secondId, {params: this.queryInfo}) 
            .then((res) => {
                if(res.data.status === 20000) {
                    res.data.data.records.map((value, index) => {
                        if(value.status === 1) {
                            this.branchWorks.push(value)
                        }
                    })
                }
            })
            .catch((err) => {
                console.log(err);
            })
        },
        goDetail(navId, depFirstId, desId, Id) {
            this.$router.push({
                path: '/computer/branchdetail/workdetail',
                query: {
                    firstId: navId,
                    secondId: depFirstId,
                    desId: desId,
                    workId: Id
                }
            })
        }
    },
}
</script>

<style lang="less" scoped>
.box {
    background: #f4f4f4;
    .content {
        padding: 20px;
        margin-top: 10px;
        .content-left {
            background: #ffff;
            display: flex;
            flex-flow: column;
            align-items: center;
            padding: 45px 0 30px;
            height: 243px;
            align-items: center;
            justify-content: space-around;
            box-shadow: 10px 10px 5px #878282;
            h3 {
                margin: 7px;
                color: #66b1ff;
                word-wrap: break-word;
            }
            h6{
                margin: 0;
                font-weight: 400;
            }
        }
        .content-right {
            .title {
                font-size: 14px;
                color: #66b1ff;
            }
        }
        .content-right--contents {
            overflow-y: hidden;
            overflow-x: hidden;
            .smallWork {
                display: flex;
                height: 100%;
                cursor: pointer;
                flex-flow: column;
                justify-content: space-between;
            }
        }
    }
}
.content /deep/ .el-avatar--circle {
    background: cornflowerblue;
}
.content /deep/ .el-tag.el-tag--danger {
    margin-right: 10px;
}
.content /deep/ .el-container.is-vertical {
    margin-left: 15px;
}
.content /deep/ .el-header {
    height: auto !important;
    background: white;
    padding: 18px;
    box-shadow: 0 0 4px 0 #d5d0d0;
}
.content /deep/ .el-aside {
    box-shadow: 0 0 4px 0 #d5d0d0;
}
.content /deep/ .el-main {
    overflow-x: hidden;
    margin-top: 20px;
    padding: 0;
}
.content /deep/ .el-card {
    margin-top: 10px;
}
.content /deep/ .el-card, .el-message {
    border-radius: 0;
}
</style>